<template>
	<view class="upperBox">	
		<view class="nav">
			<view v-for="item in tabList" :key="item.id" @click="tabClick(item.id)" :class="tabShow == item.id ? 'navLista' : 'navList'">
				<text>{{ item.name }}</text>
				<template v-if="item.imgUrl">
					<image :src="item.imgUrl" mode="" style="width: 42rpx;height: 45rpx;margin-top: 32rpx;margin-left: 4rpx;"></image>
				</template>
			</view>
		</view>
		<!-- content -->
		<view class="contentBox">
			<!-- 月度 -->
			<view class="monthlyBox">
				<view class="monthlyTitle">月度销量环比、同比</view>
				<view class="monthlyMin">月度销量（辆）</view>
				<view class="mothlyNum">{{ book_month }}</view>
				<view class="percentage">
					<view class="percentage1">
						<image src="/static/pages/index/ratio.png" class="ratio" mode=""></image>
						<view class="ratioCon">
							<view class="ratioConW">环比</view>
							<view class="ratioConP">
								<text>{{ ring_month_type == 0 ? '-' : ring_month_type == 1 ? '+' : '' }}</text>
								{{ ring_month }}%
							</view>
						</view>
					</view>
					<view class="percentage1">
						<image src="/static/pages/index/onYear.png" class="ratio" mode=""></image>
						<view class="ratioCon">
							<view class="ratioConW">同比</view>
							<view class="ratioConP1">
								<text>{{ with_month_type == 0 ? '-' : with_month_type == 1 ? '+' : '' }}</text>
								{{ with_month }}%
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 累计 -->
			<view class="monthlyBoxa">
				<view class="monthlyTitle">累计销量及同比</view>
				<view class="monthlyMin">1-10月累计销量（辆）</view>
				<view class="mothlyNum">{{ book_year }}</view>
				<view class="percentagea">
					<view class="percentage1">
						<image src="/static/pages/index/onYear.png" class="ratio" mode=""></image>
						<view class="ratioCon">
							<view class="ratioConW">同比</view>
							<view class="ratioConP1">
								<text>{{ with_year_type == 0 ? '-' : with_year_type == 1 ? '+' : '' }}</text>
								{{ with_year }}%
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="echarts1" style="padding: 0 40rpx;">
				<view style="padding: 40rpx 0 40rpx;">整体市场销量趋势</view>
				<view class="" style="display: flex;">
					<view style="display: flex;align-items: center;margin-right: 26rpx;">
						<image style="display: block;width: 66rpx;height: 26rpx;" src="/static/shang/yuan1.png" mode=""></image>
						<view>{{ kyear }}</view>
					</view>
					<view style="display: flex;align-items: center;">
						<image style="display: block;width: 66rpx;height: 26rpx;" src="/static/shang/yuan2.png" mode=""></image>
						<view>{{ jyear }}</view>
					</view>
				</view>
				<view class="charts-box" style="margin-right: 60rpx;  z-index: 0;"><qiun-data-charts  :canvas2d='true'   type="line" :chartData="chartData" /></view>
			</view>
			<view class="echarts2">
				<view class="" style="display: flex;">
					<view style="padding: 40rpx;color: #303133;font-size: 36rpx;">车型类别市场容量及增长分析</view>
					<view @click="goArea" class="" style="padding: 40rpx;color: #1855F6;">
						{{ nowCity }}
						<image style="width: 20rpx;height: 20rpx;" src="/static/pages/sanjiao.png" mode=""></image>
					</view>
				</view>
				<view>
					<view class="" style="padding: 0 0 0 40rpx;">车型类别市场容量及同比增长</view>
					<view class="charts-box"><qiun-data-charts  :canvas2d='true' type="mix" :chartData="chartData2" /></view>
				</view>
				<view>
					<view class="" style="padding: 0 0 0 40rpx;">PC类别细分市场容量及同比增长</view>
					<view class="charts-box"><qiun-data-charts  :canvas2d='true' type="mix" :chartData="chartData2a" /></view>
				</view>
				<view>
					<view class="" style="padding: 0 0 0 40rpx;">SUV类别细分市场容量及同比增长</view>
					<view class="charts-box"><qiun-data-charts  :canvas2d='true' type="mix" :chartData="chartData2b" /></view>
				</view>
			</view>

			<view class="echarts4">
				<view class="" style="display: flex;flex-wrap: wrap;width: 750rpx;">
					<view style="padding: 40rpx;color: #303133;font-size: 36rpx;">车型类别市场容量及增长分析</view>
					<view @click="goAreas" class="" style="padding: 40rpx;color: #1855F6;">
						{{ nowCity }}
						<image style="width: 20rpx;height: 20rpx;" src="/static/pages/sanjiao.png" mode=""></image>
					</view>
				</view>
				<view class="">
					<view class="" style="padding: 0 0 0 40rpx;">车型类别市场容量及同比增长</view>
					<!-- <view style="display: flex;width: 100%;justify-content: space-around;margin-top: 40rpx;"> -->
						<view class="charts-box"style="width: 100%;height: 600rpx;">
							<view class="" style="text-align: center;font-size: 24rpx;">{{ratio1}}车型类别市场占比</view>
							<view style="width: 100%;">
								<qiun-data-charts  :canvas2d='true' type="pie" :chartData="chartData3" background="none" />
							</view>
						</view>
						<view class="charts-box"style="width: 100%;height: 600rpx;">
							<view class="" style="text-align: center;font-size: 24rpx;">{{ratio2}}车型类别市场占比</view>
							<view style="width: 100%;">
								<qiun-data-charts  :canvas2d='true' type="pie" :chartData="chartData4" background="none" />
							</view>
							
						</view>
						<view class="charts-box"style="width: 100%;height: 600rpx;">
							<view class="" style="text-align: center;font-size: 24rpx;">{{ratio1}}PC车型类别市场占比</view>
							<view style="width: 100%;">
								<qiun-data-charts  :canvas2d='true' type="pie" :chartData="chartData5" background="none" />
							</view>
							
						</view>
						<view class="charts-box"style="width: 100%;height: 600rpx;">
							<view class="" style="text-align: center;font-size: 24rpx;">{{ratio2}}PC车型类别市场占比</view>
							<view style="width: 100%;">
								<qiun-data-charts  :canvas2d='true' type="pie" :chartData="chartData6" background="none" />
							</view>
							
						</view>
						<view class="charts-box"style="width: 100%;height: 600rpx;">
							<view class="" style="text-align: center;font-size: 24rpx;">{{ratio1}}SUV车型类别市场占比</view>
							<view style="width: 100%;">
								<qiun-data-charts  :canvas2d='true' type="pie" :chartData="chartData7" background="none" />
							</view>
							
						</view>
						<view class="charts-box"style="width: 100%;height: 600rpx;">
							<view class="" style="text-align: center;font-size: 24rpx;">{{ratio2}}SUV车型类别市场占比</view>
							<view style="width: 100%;">
								<qiun-data-charts  :canvas2d='true' type="pie" :chartData="chartData8" background="none" />
							</view>
							
						</view>
					<!-- </view> -->
					
		
				</view>
			</view>
				<view class="echarts2">
				<view class="" style="padding: 0 0 0 40rpx;"></view>
				<view class="">
					<view class="" style="padding: 20rpx; 0 20rpx 100rpx">车型销量及同比</view>
					<view class="" style="display: flex;">
						<view style="padding: 40rpx;color: #303133;font-size: 24rpx;">各种车型{{ratio3}}累计销量同比分析</view>
						<view class="" style="padding: 40rpx;color: #1855F6;" @click="goAreab">
							{{ nowCity }}
							<image style="width: 20rpx;height: 20rpx;" src="/static/pages/sanjiao.png" mode=""></image>
						</view>
					</view>
					<view class="charts-box"><qiun-data-charts  :canvas2d='true' type="mix" :chartData="chartData9" /></view>
				</view>
			</view>
			<view class="echarts4" style="display: flex;justify-content: space-around;flex-wrap: wrap;">
				<view class="" style="display: flex;">
					<view style="padding: 40rpx;color: #303133;font-size: 36rpx;">车型类别市场容量及增长分析</view>
					<view @click="goAreabc" class="" style="padding: 40rpx;color: #1855F6;">
						{{ nowCity }}
						<image style="width: 20rpx;height: 20rpx;" src="/static/pages/sanjiao.png" mode=""></image>
					</view>
				</view>
				<view class="charts-box"style="width: 100%;height: 600rpx;">
					<view class="" style="text-align: center;font-size: 24rpx;">{{ratio3}}车型类别市场容量及增长分析</view>
					<view style="width: 100%;">
						<qiun-data-charts  :canvas2d='true' type="pie" :chartData="chartData10" background="none" />
					</view>
					
				</view>
				<view class="charts-box"style="width: 100%;height: 600rpx;">
					<view class="" style="text-align: center;font-size: 24rpx;">{{ratio4}}车型类别市场容量及增长分析</view>
					<view style="width: 100%;">
						<qiun-data-charts  :canvas2d='true' type="pie" :chartData="chartData11" background="none" />
					</view>
					
				</view>
			</view>
		</view>
		<SCREENMASK :fatherMask="fatherMask" @chaFatherMask="fatherMaskA" ref="myPicker" :start-year="2000" :end-year="2030" @timesBox="fatimesBox" @choseVal="faChoseVal" />
	</view>
</template>

<script>
import { SCREENMASK } from '@/components/screen.vue';
import { regionUpperJ, trendRequest, growth,YearONYea } from '@/request/api.js';
export default {
	components: {
		SCREENMASK
	},
	data() {
		return {
			tabList: [
				{
					name: '综合',
					id: 1
				},
				{
					name: '最新',
					id: 2
				},
				{
					name: '筛选',
					id: 3,
					imgUrl: '/static/pages/index/screen.png'
				}
			],
			tabShow: 1,
			monthly: {}, //月度销量环比、同比
			fatherMask: false,
			page: 1,
			pageShow: false,
			book_month: '',
			ring_month: '',
			ring_month_type: '',
			with_month: '',
			with_month_type: '',

			book_year: '',
			with_year: '',
			with_year_type: '',
			dateTime: '',
			prov: '河南省', //省份
			city: '郑州',
			area: '郑州',
			chartData: {
				categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
				series: [
					{
						name: '目标值',
						data: [],
						color: '#B34038'
					},
					{
						name: '完成量',
						data: [],
						color: '#334552'
					}
				]
			},
			kyear: '', // 整体市场销量趋势开始一年
			jyear: '', // 整体市场销量趋势结束一年
			chartData2: {
				categories: [],
				series: [
					{
						name: '',
						index: 1,
						data: [],
						type: 'column',
						color: '#0DA2D9'
					},
					{
						name: '',
						index: 1,
						data: [],
						type: 'column',
						color: '#88C62F'
					},
					{
						name: '同比差异百分数',
						data: [],
						type: 'line',
						style: 'curve',
						color: '#B34038',
						disableLegend: 'true',
						lineStyle: {
							areaStyle: {}
						}
					}
				]
			}, //车型同比容量增长
			chartData2a: {
				categories: [],
				series: [
					{
						name: '',
						index: 1,
						data: [],
						type: 'column',
						color: '#0DA2D9'
					},
					{
						name: '',
						index: 1,
						data: [],
						type: 'column',
						color: '#88C62F'
					},
					{
						name: '同比差异百分数',
						data: [],
						type: 'line',
						style: 'curve',
						color: '#B34038',
						disableLegend: 'true',
						lineStyle: {
							areaStyle: {}
						}
					}
				]
			}, //PC类别细分市场容量及同比增长
			chartData2b: {
				categories: [],
				series: [
					{
						name: '',
						index: 1,
						data: [],
						type: 'column',
						color: '#0DA2D9'
					},
					{
						name: '',
						index: 1,
						data: [],
						type: 'column',
						color: '#88C62F'
					},
					{
						name: '同比差异百分数',
						data: [],
						type: 'line',
						style: 'curve',
						color: '#B34038',
						disableLegend: 'true',
						lineStyle: {
							areaStyle: {}
						}
					}
				]
			}, //SUV类别细分市场容量及同比增长
			chartData3: {
				series: [
					{
						data: []
					}
				]
			},
			chartData4: {
				series: [
					{
						data: []
					}
				]
			},
			chartData5: {
				series: [
					{
						data: []
					}
				]
			},
			chartData6: {
				series: [
					{
						data: []
					}
				]
			},
			chartData7: {
				series: [
					{
						data: []
					}
				]
			},
			chartData8: {
				series: [
					{
						data: []
					}
				]
			},
			ratio1:'', //车型同比容量增长年份（本年）
			ratio2:'',//车型同比容量增长年份（上年）
			nowCity: '郑州' ,//车型类别市场容量及增长分析
			nowCitys:'郑州' ,//饼状图
			nowCitya:'郑州',
			ratio3:'', //各种车型同比容量增长年份（本年）
			ratio4:'',//各种车型同比容量增长年份（上年）
			chartData9: {
				categories: [],
				series: [
					{
						name: '',
						index: 1,
						data: [],
						type: 'column',
						color: '#0DA2D9'
					},
					{
						name: '',
						index: 1,
						data: [],
						type: 'column',
						color: '#88C62F'
					},
					{
						name: '同比差异百分数',
						data: [],
						type: 'line',
						style: 'curve',
						color: '#B34038',
						disableLegend: 'true',
						lineStyle: {
							areaStyle: {}
						}
					}
				]
			},
			chartData10: {
				series: [
					{
						data: []
					}
				]
			},
			chartData11:{
				series: [
					{
						data: []
					}
				]
			},
			nowCityas:'郑州'
		};
	},
	onLoad() {
		this.growthClick();
		this.yearClick();
		//获取环比和同比数据，初始化数据河南省，郑州市；
		this.dateTime = this.getNowFormatDate();
		if (this.dateTime) {
			this.init();  
			this.whole();
		}
	},
	onShow() {
		// //获取环比和同比数据，初始化数据河南省，郑州市；
		// this.dateTime = this.getNowFormatDate();
		// if (this.dateTime) {
		// 	this.init();  
		// 	this.whole();
		// }

		// 整体市场销量趋势
		let pages = getCurrentPages(); //获取所有页面栈实例列表
		let nowPage = pages[pages.length - 1]; //当前页页面实例
		if (nowPage.brand) {
			this.nowCity = nowPage.brand.text;
			this.prov = '';
			this.city = nowPage.brand.text;
			this.dateTime = this.dateTime;
			this.init();
			this.whole();
			
			this.growthClick();			
			this.chartClick();
			this.yearClick();
			this.yearClicks();
			

			
		}
		//饼状图
		if (nowPage.brands) {
			this.nowCity=  nowPage.brands.text;
			this.prov = '';
			this.city = nowPage.brands.text;
			this.dateTime = this.dateTime;
			this.init();
			this.whole();
			
			this.growthClick();
			this.chartClick();
			this.yearClick();
			this.yearClicks();
		}
		if(nowPage.branda){
			this.nowCity=  nowPage.branda.text;
			this.prov = '';
			this.city = nowPage.branda.text;
			this.dateTime = this.dateTime;
			this.init();
			this.whole();
			
			this.growthClick();
			this.chartClick();
			this.yearClick();
			this.yearClicks();
		}
		if(nowPage.brandas){
			this.nowCity=  nowPage.brandas.text;
			this.prov = '';
			this.city = nowPage.brandas.text;
			this.dateTime = this.dateTime;
			this.init();
			this.whole();
			
			this.growthClick();
			this.chartClick();
			this.yearClick();
			this.yearClicks();
		}
	},
	
	
	methods: {
		init() {
			let _this = this;
			let data = {
				date: _this.dateTime,
				prov: _this.prov,
				city: _this.city
			};
			regionUpperJ(data)
				.then(res => {
					if (res.code == 1) {
						// console.log(res);
						_this.monthly = res.data;
						_this.book_month = _this.monthly.book_month;
						_this.ring_month = _this.monthly.ring_month;
						_this.ring_month_type = _this.monthly.ring_month_type;
						_this.with_month = _this.monthly.with_month;
						_this.with_month_type = _this.monthly.with_month_type;
						_this.book_year = _this.monthly.book_year;
						_this.with_year = _this.monthly.with_year;
						_this.with_year_type = _this.monthly.with_year_type;
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 整体市场销量趋势
		whole() {
			let _this = this;
			let data = {
				date: _this.dateTime,
				prov: _this.prov,
				city: _this.city
			};
			trendRequest(data)
				.then(res => {
					// console.log(res)
					if (res.code == 1) {
						let arr = [];
						_this.chartData.series[0].data = [];
						_this.chartData.series[1].data = [];
						_this.kyear = res.data.ben_year;
						_this.jyear = res.data.last_year;
						for (let a in res.data.ben) {
							arr.push(a);
							_this.chartData.series[0].data.push(res.data.ben[a]);
						}
						_this.chartData.categories = arr;
						for (let as in res.data.last) {
							_this.chartData.series[1].data.push(res.data.ben[as]);
						}
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		//获取当前时间
		getNowFormatDate() {
			var date = new Date();
			var seperator1 = '-';
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			if (month >= 1 && month <= 9) {
				month = '0' + month;
			}
			var currentdate = year + seperator1 + month;
			return currentdate;
		},
		//车型同比容量增长
		growthClick() {
			let _this = this;
			let data = {
				city: _this.nowCity
			};
			growth(data)
				.then(res => {
					if (res.code == 1) {
						// console.log(res, );
						//车型同比容量增长
						_this.chartData2.series[0].name = res.data.ben_year;
						_this.chartData2.series[1].name = res.data.last_year;
						_this.ratio1=res.data.ben_year;
						_this.ratio2=res.data.last_year;
						_this.chartData2.series[0].data = [];
						_this.chartData2.series[1].data = [];
						_this.chartData2.series[2].data = [];
						let arr = [];

						for (let a in res.data.chexing.ben) {
							arr.push(a);
							_this.chartData2.series[0].data.push(res.data.chexing.ben[a]);
						}
						for (let i in res.data.chexing.last) {
							_this.chartData2.series[1].data.push(res.data.chexing.last[i]);
						}
						for (let is in res.data.chexing.bilu) {
							let av = Number(res.data.chexing.bilu[is].split('%')[0]);

							_this.chartData2.series[2].data.push(av);
						}
						_this.chartData2.categories = arr;
						//PC类别细分市场容量及同比增长
						let abb = [];
						_this.chartData2a.series[0].name = res.data.ben_year;
						_this.chartData2a.series[1].name = res.data.last_year;
						_this.chartData2a.series[0].data = [];
						_this.chartData2a.series[1].data = [];
						_this.chartData2a.series[2].data = [];
						for (let a in res.data.PC.ben) {
							abb.push(a);
							_this.chartData2a.series[0].data.push(res.data.PC.ben[a]);
						}
						for (let i in res.data.PC.last) {
							_this.chartData2a.series[1].data.push(res.data.PC.last[i]);
						}
						for (let is in res.data.PC.bilu) {
							let av = Number(res.data.PC.bilu[is].split('%')[0]);

							_this.chartData2a.series[2].data.push(av);
						}
						_this.chartData2a.categories = abb;
						// SUV类别细分市场容量及同比增长
						let asuv = [];
						_this.chartData2b.series[0].name = res.data.ben_year;
						_this.chartData2b.series[1].name = res.data.last_year;
						_this.chartData2b.series[0].data = [];
						_this.chartData2b.series[1].data = [];
						_this.chartData2b.series[2].data = [];
						for (let a in res.data.SUV.ben) {
							asuv.push(a);
							_this.chartData2b.series[0].data.push(res.data.SUV.ben[a]);
						}
						for (let i in res.data.SUV.last) {
							_this.chartData2b.series[1].data.push(res.data.SUV.last[i]);
						}
						for (let is in res.data.SUV.bilu) {
							let av = Number(res.data.SUV.bilu[is].split('%')[0]);

							_this.chartData2b.series[2].data.push(av);
						}
						_this.chartData2b.categories = asuv;
						//车型同比容量增长本年饼状图
						_this.chartData3.series[0].data=[]
						for(let a in res.data.chexing.ben_bing){
							let av = Number(res.data.chexing.ben_bing[a].split('%')[0]);
							let obj ={
								name:a,
								value:av
							}
						
							_this.chartData3.series[0].data.push(obj)
						}
						//车型同比容量增长上年饼状图
						_this.chartData4.series[0].data=[]
						for(let a in res.data.chexing.last_bing){
							let av = Number(res.data.chexing.last_bing[a].split('%')[0]);
							let obj ={
								name:a,
								value:av
							}
						
							_this.chartData4.series[0].data.push(obj)
						}
						//PC车型同比容量增长本年饼状图
						_this.chartData5.series[0].data=[]
						for(let a in res.data.PC.last_bing){
							let av = Number(res.data.PC.last_bing[a].split('%')[0]);
							let obj ={
								name:a,
								value:av
							}
							_this.chartData5.series[0].data.push(obj)
						}
						// PC车型同比容量增长上年饼状图
						_this.chartData6.series[0].data=[]
						for(let a in res.data.PC.last_bing){
							let av = Number(res.data.PC.last_bing[a].split('%')[0]);
							let obj ={
								name:a,
								value:av
							}
						
							_this.chartData6.series[0].data.push(obj)
						}
						//SUV车型同比容量增长本年饼状图
						_this.chartData7.series[0].data=[]
						for(let a in res.data.SUV.last_bing){
							let av = Number(res.data.SUV.last_bing[a].split('%')[0]);
							let obj ={
								name:a,
								value:av
							}
							_this.chartData7.series[0].data.push(obj)
						}
						// SUV车型同比容量增长上年饼状图
						_this.chartData8.series[0].data=[]
						for(let a in res.data.SUV.last_bing){
							let av = Number(res.data.SUV.last_bing[a].split('%')[0]);
							let obj ={
								name:a,
								value:av
							}
						
							_this.chartData8.series[0].data.push(obj)
						}
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		//饼状图数据
		chartClick(){
			let _this = this;
			let data = {
				city: _this.nowCity
			};
			growth(data).then(res=>{
				if(res.code==1){
					//车型同比容量增长本年饼状图
					_this.chartData3.series[0].data=[]
					for(let a in res.data.chexing.ben_bing){
						let av = Number(res.data.chexing.ben_bing[a].split('%')[0]);
						let obj ={
							name:a,
							value:av
						}
					
						_this.chartData3.series[0].data.push(obj)
					}
					//车型同比容量增长上年饼状图
					_this.chartData4.series[0].data=[]
					for(let a in res.data.chexing.last_bing){
						let av = Number(res.data.chexing.last_bing[a].split('%')[0]);
						let obj ={
							name:a,
							value:av
						}
					
						_this.chartData4.series[0].data.push(obj)
					}
					//PC车型同比容量增长本年饼状图
					_this.chartData5.series[0].data=[]
					for(let a in res.data.PC.last_bing){
						let av = Number(res.data.PC.last_bing[a].split('%')[0]);
						let obj ={
							name:a,
							value:av
						}
						_this.chartData5.series[0].data.push(obj)
					}
					// PC车型同比容量增长上年饼状图
					_this.chartData6.series[0].data=[]
					for(let a in res.data.PC.last_bing){
						let av = Number(res.data.PC.last_bing[a].split('%')[0]);
						let obj ={
							name:a,
							value:av
						}
					
						_this.chartData6.series[0].data.push(obj)
					}
					//SUV车型同比容量增长本年饼状图
					_this.chartData7.series[0].data=[]
					for(let a in res.data.SUV.last_bing){
						let av = Number(res.data.SUV.last_bing[a].split('%')[0]);
						let obj ={
							name:a,
							value:av
						}
						_this.chartData7.series[0].data.push(obj)
					}
					// SUV车型同比容量增长上年饼状图
					_this.chartData8.series[0].data=[]
					for(let a in res.data.SUV.last_bing){
						let av = Number(res.data.SUV.last_bing[a].split('%')[0]);
						let obj ={
							name:a,
							value:av
						}
					
						_this.chartData8.series[0].data.push(obj)
					}
				}
			}).catch(er=>{
				console.log(er)
			})
		},
		// 车型销量及同比
		yearClick(){
			let _this = this;
			let data = {
				city:_this.nowCity
			}
			YearONYea(data).then(res=>{
				if(res.code==1){
					// console.log(res,'同比============')
					_this.chartData9.series[0].name = res.data.ben_year;
					_this.chartData9.series[1].name = res.data.last_year;
					_this.ratio3=res.data.ben_year;
					_this.ratio4=res.data.last_year;
					_this.chartData9.series[0].data = [];
					_this.chartData9.series[1].data = [];
					_this.chartData9.series[2].data = [];
					let arr = [];
					for (let a in res.data.ben) {
						arr.push(a);
						_this.chartData9.series[0].data.push(res.data.ben[a]);
					}
					for (let i in res.data.last) {
						_this.chartData9.series[1].data.push(res.data.last[i]);
					}
					for (let is in res.data.bilu) {
						let av = Number(res.data.bilu[is].split('%')[0]);
					
						_this.chartData9.series[2].data.push(av);
					}
					
					_this.chartData9.categories = arr;
					//饼状图
					_this.chartData10.series[0].data=[]
					for(let a in res.data.ben_bing){
						let av = Number(res.data.ben_bing[a].split('%')[0]);
						let obj ={
							name:a,
							value:av
						}
					
						_this.chartData10.series[0].data.push(obj)
					}
					_this.chartData11.series[0].data=[]
					for(let a in res.data.last_bing){
						let av = Number(res.data.last_bing[a].split('%')[0]);
						let obj ={
							name:a,
							value:av
						}
						_this.chartData11.series[0].data.push(obj)
					}
				}
			}).catch(err=>{
				
			})
		},
		yearClicks(){
			let _this = this;
			let data = {
				city:_this.nowCity
			}
			YearONYea(data).then(res=>{
				if(res.code==1){
					//饼状图
					_this.chartData10.series[0].data=[]
					for(let a in res.data.ben_bing){
						let av = Number(res.data.ben_bing[a].split('%')[0]);
						let obj ={
							name:a,
							value:av
						}
					
						_this.chartData10.series[0].data.push(obj)
					}
					_this.chartData11.series[0].data=[]
					for(let a in res.data.last_bing){
						let av = Number(res.data.last_bing[a].split('%')[0]);
						let obj ={
							name:a,
							value:av
						}
						_this.chartData11.series[0].data.push(obj)
					}
				}
			}).catch(err=>{
				
			})
		},
		
		// 跳转到地区列表
		goArea() {
			uni.navigateTo({
				url: `/pages/groundPole/upperGround/area?id=${1}`
			});
		},
		goAreas() {
			uni.navigateTo({
				url: `/pages/groundPole/upperGround/area?id=${2}`
			});
		},
		goAreab() {
			uni.navigateTo({
				url: `/pages/groundPole/upperGround/area?id=${3}`
			});
		},
		goAreabc() {
			uni.navigateTo({
				url: `/pages/groundPole/upperGround/area?id=${4}`
			});
		},
		
		tabClick(id) {
			let _this = this;
			if (id == 3) {
				this.fatherMask = true;
			} else {
				_this.tabShow = id;
			}
		},
		fatherMaskA(val) {
			console.log(1,val);
			this.fatherMask = val;
			this.init();
			this.whole();
			
			this.growthClick();
			this.chartClick();
			this.yearClick();
			this.yearClicks();
		},
		faChoseVal(val) {
			console.log(2,val);
			console.log(val);
			this.prov = val.province;
			this.city = val.city;
			this.nowCity = val.city
			
		},
		fatimesBox(val) {
			console.log(3,val);
			// console.log(val)
			this.dateTime = val;
		}
	}
};
</script>

<style lang="scss">

.echarts1 {
	width: 100%;
	padding: 0 100rpx;
	height: 750rpx;
	background: #fff;
	box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(211, 213, 220, 0.4);
}

.echarts2,
.echarts4 {
	width: 100%;
	// height: 656rpx;
	margin: 44rpx 0 44rpx;
	padding: 0 0 40rpx;
	background: #fff;
	box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(211, 213, 220, 0.4);
}

.container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
}

/**index.wxss**/
ec-canvas {
	width: 100%;
	height: 100%;
}

// .charts-box{
// 	z-index: 0;
// }

.charts-box1 {
	// width: 30%;
	background: #fff;
	display: flex;
	width: 40%;
	height: 300rpx;
	// padding: 60rpx 0 0;
	// box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(211, 213, 220, 0.4);

	.title11 {
		color: #303133;
		font-size: 36rpx;
		font-weight: bold;
		margin: 0 0 0 40rpx;
	}
}

.charts-box3 {
	width: 100%;

	height: 1132rpx;
	background-color: pink;
}

.pie_biao {
}

.chartsview {
	height: auto;
}

.title {
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	width: 100%;
	position: fixed;
	top: 0;
	// z-index: 999;
	background: #fff;
	margin-top: var(--status-bar-height);
}
page {
	background-color: #ffffff;
}

.upperBox {
	width: 100%;
	box-sizing: border-box;
	padding-bottom: 40rpx;

	.nav {
		width: 100%;
		display: flex;
		height: 100rpx;
		justify-content: space-around;
		// margin-top: calc(var(--status-bar-height));
		.navList {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #909299;
			line-height: 100rpx;
			padding-bottom: 20rpx;
			display: flex;
		}
	}
	.contentBox {
		width: 100%;
		overflow: hidden;
		padding-bottom: 100rpx;
		.monthlyBox {
			width: 100%;
			overflow: hidden;

			.monthlyTitle {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #303133;
				margin: 30rpx 0 0 41rpx;
			}

			.monthlyMin {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #303133;
				margin: 39rpx 0 0 41rpx;
			}

			.mothlyNum {
				text-align: center;
				font-size: 48rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #303133;
				line-height: 200rpx;
			}

			.percentage {
				width: 100%;
				display: flex;
				justify-content: space-around;

				.percentage1 {
					display: flex;
					margin-left: -80rpx;

					.ratio {
						width: 80rpx;
						height: 80rpx;
					}

					.ratioCon {
						overflow: hidden;
						margin-left: 25rpx;

						.ratioConW {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #909299;
						}

						.ratioConP {
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #1855f6;
							margin-top: 10rpx;
						}

						.ratioConP1 {
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #36b26a;
							margin-top: 10rpx;
						}
					}
				}
			}
		}

		.monthlyBoxa {
			width: 100%;
			overflow: hidden;
			margin-top: 90rpx;

			.monthlyTitle {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #303133;
				margin: 30rpx 0 0 41rpx;
			}

			.monthlyMin {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #303133;
				margin: 39rpx 0 0 41rpx;
			}

			.mothlyNum {
				text-align: center;
				font-size: 48rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #303133;
				line-height: 200rpx;
			}

			.percentage {
				width: 100%;
				display: flex;
				justify-content: space-around;

				.percentage1 {
					display: flex;
					margin-left: -80rpx;

					.ratio {
						width: 80rpx;
						height: 80rpx;
					}

					.ratioCon {
						overflow: hidden;
						margin-left: 25rpx;

						.ratioConW {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #909299;
						}

						.ratioConP {
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #1855f6;
							margin-top: 10rpx;
						}

						.ratioConP1 {
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #36b26a;
							margin-top: 10rpx;
						}
					}
				}
			}

			.percentagea {
				width: 100%;
				margin-left: 40rpx;

				.percentage1 {
					display: flex;

					.ratio {
						width: 80rpx;
						height: 80rpx;
					}

					.ratioCon {
						overflow: hidden;
						margin-left: 25rpx;

						.ratioConW {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #909299;
						}

						.ratioConP {
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #1855f6;
							margin-top: 10rpx;
						}

						.ratioConP1 {
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #36b26a;
							margin-top: 10rpx;
						}
					}
				}
			}
		}
	}
}

.navLista {
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 400;
	// color: #909299;
	line-height: 100rpx;
	padding-bottom: 20rpx;
	color: #1855f6;
	border-bottom: 4rpx solid #1855f6;
	display: flex;
}
</style>
